import { ProForm } from "@alipay/tech-ui";
import { RuleTree } from "@alipay/techui-rule-tree";
import { Button, Form, Input, Select, Space } from "antd";
import { useState } from "react";

export default function App() {
  const [form] = ProForm.useForm();
  const [value, setValue] = useState({});

  return (
    <div>
      <ProForm
        form={form}
        onValuesChange={(_, values) => {
          setValue(values);
        }}
      >
        <Form.List name={"list"}>
          {(fields) => {
            return fields.map((meta) => {
              return (
                <Form.Item key={meta.key} name={[meta.name, "tree"]}>
                  <RuleTree<{ name: string; age: number }>
                    onChange={console.log}
                  >
                    {(field) => {
                      return (
                        <Space>
                          <Form.Item
                            noStyle
                            name={[field.name, "name"]}
                            rules={[
                              { required: true },
                              {
                                validator(rule, value) {
                                  if (value?.length < 2) {
                                    return Promise.reject("长度不应小于2");
                                  }
                                  return Promise.resolve();
                                },
                              },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            noStyle
                            name={[field.name, "select"]}
                            rules={[{ required: true }]}
                          >
                            <Select
                              style={{ width: 150 }}
                              options={[
                                { label: "Jack", value: "jack" },
                                { label: "Lucy", value: "lucy" },
                              ]}
                            />
                          </Form.Item>
                        </Space>
                      );
                    }}
                  </RuleTree>
                </Form.Item>
              );
            });
          }}
        </Form.List>
        <Button
          block
          type="dashed"
          onClick={() =>
            form.setFieldValue("list", [
              ...(form.getFieldValue("list") || []),
              {},
            ])
          }
        >
          添加
        </Button>
      </ProForm>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
